<template>
	<div class="ratings" ref="ratings">
		<div class="ratings-content">
			<div class="overview">
				<div class="overview-left">
					<h1 class="score">{{seller.score}}</h1>
					<div class="title">综合评分</div>
					<div class="rank">高于周边商家{{seller.rankRate}}%</div>
				</div>
				<div class="overview-right">
					<div class="score-wrapper">
						<span class="title">服务态度</span>
						<star :size="36" :score="seller.serviceScore"></star>
						<span class="score">{{seller.serviceScore}}</span>
					</div>
					<div class="score-wrapper">
						<span class="title">商品评分</span>
						<star :size="36" :score="seller.foodScore"></star>
						<span class="score">{{seller.foodScore}}</span>
					</div>
					<div class="delivery-wrapper">
						<span class="title">送达时间</span>
						<span class="delivery">{{seller.deliveryTime}}分钟</span>
					</div>
				</div>
			</div>
			<split></split>
			<ratingselect @select="selectRating" @toggle="toggleContent" :selectType="selectType" :onlyContent="onlyContent"
                    :ratings="ratings"></ratingselect>
	        <div class="rating-wrapper">
	        	<ul>
	        		<li v-for="rating of ratings" v-show="needShow(rating.rateType,rating.text)" class="rating-item">
	        			<div class="avatar">
	        				<img :src="rating.avatar" alt="">
	        			</div>
	        			<div class="content">
	        				<h1 class="name">{{rating.username}}</h1>
	        				<div class="star-wrapper">
	        					<star :size="24" :score="rating.score"></star>
	        					<span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
	        					<p class="text">{{rating.text}}</p>
	        					<div class="recommend" v-show="rating.recommend && rating.recommend.length">
					                <i class="iconfont" :class="{'icon-good':rating.rateType===0,'icon-bad':rating.rateType===1}"></i>
					                <span class="item" v-for="item in rating.recommend">{{item}}</span>
					            </div>
					            <div class="time">{{rating.rateTime | formatDate}}</div>
	        				</div>
	        			</div>
	        		</li>
	        	</ul>
	        </div>
        </div>
	</div>
</template>

<script>
import Bscroll from 'better-scroll';
import star from '@/components/star/star.vue'
import split from '@/components/split/split.vue'
import ratingselect from '@/components/ratingselect/ratingselect.vue'
import {formatDate} from '@/common/js/date.js'


const POSITIVE=0
const NEGATIVE=1
const All=2
export default{
	props:{
		seller:Object,
		ratings:Array
	},
	data(){
		return{
            selectType:All,
            onlyContent:true
		}
	},
	components:{
		star,
		split,
		ratingselect
	},
	mounted(){
		this.ratingsScroll=new Bscroll(this.$refs.ratings,{
			click:true
		})
	},
	methods:{
		selectRating(type){
	        this.selectType=type
	    },
	    toggleContent(){
	        this.onlyContent=!this.onlyContent
	    },
		needShow(type,text){
			if(this.onlyContent && !text){
		  		return false
			}
			if(this.selectType===All){
			  	return true
			}else{
			  	return type===this.selectType
			}
		}
	},
	filters:{
		formatDate(time){
		  let date=new Date(time)
		  return formatDate(date,'yyyy-MM-dd hh:mm')
		}
	}
}

</script>

<style lang="stylus" scoped>
.ratings{position:absolute;left:0;top:174px;bottom:0;width:100%;overflow:hidden;}
.overview{display:flex;padding:18px 0;}
.overview-left{flex:0 0 137px;width:137px;border-right:0.5px solid rgba(7,17,27,0.1);text-align:center;padding:6px 0;
@media only screen and (max-width: 320px){flex: 0 0 120px;width: 120px}
}
.overview-left .score{line-height:24px;color:rgb(255,153,0);font-size:24px;margin-bottom:6px;}
.overview-left .title{font-size:12px;line-height:12px;color:rgb(7,17,27);margin-bottom:8px;}
.overview-left .rank{line-height:10px;font-size:10px;color:rgb(147,153,159);}
.overview-right{flex:1;padding:6px 0 6px 24px;
@media only screen and (max-width: 320px){padding-left: 6px;}
}
.score-wrapper{margin-bottom: 8px;font-size: 0;}
.score-wrapper .title{display: inline-block;line-height: 18px;vertical-align: top;font-size: 12px;color: rgb(7, 17, 27);}
.score-wrapper .star{display:inline-block;margin: 0 12px;vertical-align: top;}
.score-wrapper .score{display: inline-block;line-height: 18px;vertical-align: top;font-size: 12px;color: rgb(255, 153, 0);}
.delivery-wrapper{font-size: 0;}
.delivery-wrapper .title{line-height: 18px;font-size: 12px;color: rgb(7, 17, 27);}
.delivery-wrapper .delivery{margin-left: 12px;font-size: 12px;color: rgb(147, 153, 159);}

.rating-wrapper{padding: 0 18px;}
.rating-item{display: flex;padding: 18px 0;border-bottom:0.5px solid rgba(7, 17, 27, 0.1);}
.avatar{flex: 0 0 28px;width: 28px;margin-right: 12px;}
.avatar img{border-radius: 50%;width:100%;}
.content{position: relative;flex: 1;}
.name{margin-bottom: 4px;line-height: 12px;font-size: 10px;color: rgb(7, 17, 27);}
.star-wrapper{margin-bottom: 6px;font-size: 0;}
.star{display: inline-block;margin-right: 6px;vertical-align: top;}
.delivery{display: inline-block;line-height: 12px;font-size: 10px;color: rgb(147, 153, 159);}
.text{margin-bottom: 8px;line-height: 18px;color: rgb(7, 17, 27);font-size: 12px;}
.recommend{line-height: 16px;font-size: 0;}
.item{padding: 0 6px;border: 1px solid rgba(7, 17, 27, 0.1);border-radius: 1px;color: rgb(147, 153, 159);background: #fff;font-size:10px;margin-left:3px;}
.time{position: absolute;top: 0;right: 0;line-height: 12px;font-size: 10px;color: rgb(147, 153, 159);}
.icon-good{color:rgb(0,160,220);}
.icon-bad{color:rgb(147,153,159);}
</style>
